<template>
  <div>
    <van-nav-bar title="头条 登录" />
    <div>
      <!-- van-form整体表单组件  @submit 为自定义事件，
            van-field 为表单输入框 
            rules属性配置检验规则
            :属性名='表达式'
            属性名='字符串'  -->
      <van-form @submit="onSubmit">
        <van-field
          required
          v-model="user.mobile"
          name="mobile"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            {
              required: true,
              message: '请填写手机号',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]"
        />
        <van-field
          v-model="user.code"
          required
          type="password"
          name="code"
          label="密码"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '请填写密码', pattern: /^\d{6}$/ },
          ]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit" 
          :loading="isloading" 
          loading-text="正在加载中"
          :disabled="isloading"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
//写需求的套路
// 1.html+CSS
// 2.数据铺设 数据绑定  数据微调
// 3. js交互 -> 事件/正则

//组件使用套路
//找组件 ，引组件 ，用组件(标签和js复制)，读，删，改

// 优化点：当用户点击登录的时候显示 正在加载中，并且禁用按钮，避免用户多次点击，或网速慢时没有提示
import { loginAPI } from "@/api";
import { Notify } from 'vant';
import { setToken } from '@/utils/token.js'
export default {
  data() {
    return {
      user: {
        mobile: "", //手机号
        code: "", //密码
      },
      isloading:false
    };
  },
  methods: {
    //点击登录给用户一个正在加载的状态，防止用户重复点击
    async onSubmit(values) {
      // console.log("submit", values);
      this.isloading=true;
      try {
        const res = await loginAPI(this.user);
        // console.dir(res);
        Notify({ type: 'success', message: '登录成功' });
        //设置token1值
        setToken(res.data.data.token)
        localStorage.setItem('refresh_token',res.data.data.refresh_token)

        //跳转一定要在最后操作，尽量在最后操作
        // location.href 当前浏览器地址和要跳转的地址一样，(不包含#后面的锚点信息) -->不会刷新网页
        //地址改变，就会导致页面刷新
        this.$router.replace({
          path:'/layout/home'
        })
      } catch (error) {
        //promise 内ajax报错，直接进入到这里
        Notify({ type: 'warning', message: '密码或账号错误' });
      }
      this.isloading = false //无论网络请求成功与否，将状态关闭
    },
  },
};
</script>
<style lang="less" scoped>
// .van-nav-bar {
//   background-color: #017bff;
// }
// // 当有scoped的时候，选不中组件内部的标签，就是表面没有的
// // lang='less' ,当前style的标签内说less语法，用 /deep/ 就不会被vscode报错。
// // /deep/ 会把属性选择器加到前面，用后代选择器的方式往里找匹配的类名
// //结论：要修改组件内样式，如果你用了scoped，就需要在选择器前面加上 /deep/
// /deep/  .van-nav-bar__title {
//   color: #fff;
// }
</style>